<template>
  <!-- <baidu-map class="bm-view" :ak="location.ak" :center="location.center" :zoom="location.zoom" @ready="handlerMap">
		<bm-control>
			<button class="ui button" style="margin:4px">显示范围</button>
		</bm-control>
		<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
		<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true" @locationSuccess="autoLocationSuccess" @locationError="autoLocationError"></bm-geolocation>
		<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
  </baidu-map>-->
  <div class="amap-page-container">
    <el-amap
      ref="map"
      vid="amapDemo"
      :amap-manager="amapManager"
      :center="center"
      :zoom="zoom"
      :plugin="plugin"
      :events="events"
      class="amap-demo"
      :isHotspot="true"
    />
  </div>
</template>
<script>
import location from "@/mixins/location";
import { AMapManager } from "vue-amap";
import VueAMap from "vue-amap";
let amapManager = new VueAMap.AMapManager();
export default {
  name: "bmap",
  mixins: [location],
  data() {
    return {
      baseUrl: process.env.BASE_URL,
      img: require("@/assets/images/elliot.jpg"),
      amapManager,
      zoom: 19,
      center: [120.3829264641,30.3172473042],
      events: {
        init: o => {
          console.log(o.getCenter());
          console.log(this.$refs.map.$$getInstance());
          o.getCity(result => {
            console.log(result);
          });
        },
        moveend: () => {},
        zoomchange: () => {},
        click: e => {
          alert("map clicked");
        }
      },
      plugin: [
        "ToolBar",
        {
          pName: "MapType",
          defaultType: 0,
          events: {
            init(o) {
              console.log(o);
            }
          }
        }
      ]
    };
  },
  methods: {
    shower() {
      console.log("显示");
    },
    getMap() {
      // amap vue component
      console.log(amapManager._componentMap);
      // gaode map instance
      console.log(amapManager._map);
    }
  }
};
</script>
<style lang="less" scoped>
.bm-view {
  width: 100%;
  height: 994px;
}
.amap-demo {
  width: 100%;
  height: 994px;
}
.search-box {
  position: absolute;
  top: 25px;
  left: 20px;
}

.amap-page-container {
  position: relative;
}
</style>
